<html>
<head>
    <meta charset="utf-8">
    <meta name="author" content="order by dede58.com"/>
    <title>发布订单</title>
    <link rel="stylesheet" type="text/css" href="css/jiazaitoubu.css">
    <link rel="stylesheet" type="text/css" href="css/css.css">
    <link rel="stylesheet" type="text/css" href="css/center.css">
    <link rel="stylesheet" type="text/css" href="css/city.css">

    <script src="js/jquery-1.8.3.min.js"></script>
    <script src="js/index2.js"></script>
    <script src="js/Popt.js"></script>
    <script src="js/cityJson.js"></script>
    <script src="js/citySet.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="js/common.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.js"></script>
</head>


<body>
<div id="app">
    <top></top>
    <bar></bar>

    <div class="centers_m">
        <bars></bars>
        <div class="public_m1">
            <div class="public_m2">发布订单</div>
            <!--提示信息-->
            <div class="tip_notem">
                <ul>
                    <li>1.供暖信息必须与账户信息一致</li>
                    <li>2.为了您的方便，请尽量填写您正确的供暖号码</li>
                </ul>
            </div>
            <div class="public_m4">
                <p>
                    <em>联系人姓名：</em>
                    <input type="text" style=" height:23px; border:1px solid #eaeaea; width:140px" ref="userName"
                           v-model.trim="ordersinfo.userName" @blur="findUserinfo">
                    <span>{{error.userName}}</span>
                </p>
                <p>
                    <em>联系方式：</em>
                    <input type="text" style=" height:23px; border:1px solid #eaeaea; width:140px;"
                           v-model.trim="ordersinfo.phone">
                    <span>{{error.phoneNumber}}</span>
                </p>
                <p>
                    <em>供暖号码：</em>
                    <input type="text" style=" height:23px; border:1px solid #eaeaea; width:140px" ref="heatingNumber"
                           v-model.trim="ordersinfo.heatingNumber" @blur="findAddress">
                    <span>{{error.heatingNumber}}</span>
                </p>
                <p>
                    <em>省：</em>

                    <select v-model="province.id" @click="findCity">
                        <option>-请选择-</option>
                        <option v-for="selectAllProvince,index in selectAllProvince" :value="selectAllProvince.id">
                            {{selectAllProvince.title}}
                        </option>
                    </select>
                    市：
                    <select v-model="city.id" @click="findDistrict">
                        <option>-请选择-</option>
                        <option v-for="findCityByProvinceId,index in findCityByProvinceId"
                                :value="findCityByProvinceId.id">{{findCityByProvinceId.title}}
                        </option>
                    </select>
                    区：
                    <select v-model="district.id" @click="findStreet">
                        <option>-请选择-</option>
                        <option v-for="findDistrictByCityID,index in findDistrictByCityID"
                                :value="findDistrictByCityID.id">{{findDistrictByCityID.title}}
                        </option>
                    </select>
                    街道：
                    <select v-model="street.id">
                        <option>-请选择-</option>
                        <option v-for="findStreetByDistrictId,index in findStreetByDistrictId"
                                :value="findStreetByDistrictId.id">{{findStreetByDistrictId.title}}
                        </option>
                    </select>
                </p>
                <p>
                    <em>订单地址：</em>

                    <input type="text" style=" height:23px; border:1px solid #eaeaea; width:140px" list="address"
                           ref="heatingAddress" v-model="ordersinfo.addressInfo"
                           @change="findProvincialAndMunicipaLinkageByAddress">
                    <datalist id="address">
                        <option v-for="findAddressByUserinfo,index in findAddressByUserinfo">{{findAddressByUserinfo}}
                        </option>
                        <option>测试地址1</option>
                        <option>测试地址2</option>
                        <option>测试地址3</option>
                    </datalist>
                    <span>{{error.heatingAddress}}</span>
                </p>


                <p>
                    <em>故障类型：</em>
                    <select style=" height:25px; width: 160px; border:1px solid #eaeaea;margin-top:13px"
                            v-model="ordersinfo.faultTypeId">
                        <option>-请选择-</option>
                        <option v-for="findFaultType,index in findFaultType" :value="findFaultType.id">
                            {{findFaultType.title}}
                        </option>
                    </select>
                </p>
                <!--                <p style="margin-top:53px;">-->
                <!--                    <em>下单类型：</em>-->
                <!--                    <select v-model="ordersinfo.orderTime" v-show="orderTime" @click="time">-->
                <!--                        <option  v-for="findOrderDate,index in findOrderDate":value="findOrderDate.id">-->
                <!--                            {{findOrderDate.value}}-->
                <!--                        </option>-->
                <!--                    </select>-->
                <!--                    <select v-model="orderTimeZone" v-show="order">-->
                <!--                        <option>-请选择-</option>-->
                <!--                        <option v-for="findTimeZone,index in findTimeZone":value="findTimeZone">{{findTimeZone}}</option>-->
                <!--                    </select>-->
                <!--                    <select v-model="ordersinfo.Appointmentime" v-show="orderToday">-->
                <!--                        <option v-for="findTimeZonePm,index in findTimeZonePm":value="findTimeZonePm">{{findTimeZonePm}}</option>-->
                <!--                    </select>-->
                <!--                    -->
                <!--                    <input type="text" style=" height:25px; border:2px solid #eaeaea; width:140px" v-model="orderConfirm" readonly="readonly">-->
                <!--                    -->
                <!--                <span style="" v-show="Confirm">{{orderConfirm}}</span>-->
                <!--                </p>-->

                <div style="width:870px;height:100px;margin-top:20px;">

                    <div style="margin-left: 74px; width: 130px ;float: left">
                        <table style="border: 100px;solid-color: #0a628f">
                            <tbody>
                            <tr @click="time(index)" v-for="findOrderDate,index in findOrderDate">
                                <td style="margin-top: 20px"
                                    >{{findOrderDate.value}}
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                    <select v-model="ordersinfo.orderTimeZone" v-show="order" style="font-size: 20px;">
                        <option v-for="(value,key) in freeTime" :key="key" v-if="value.length">{{key}}</option>
<!--                        -->
                    </select>
<!--                    <div>-->
<!--                        <div v-model="ordersinfo.orderTimeZone[key]" v-for="(value,key) in freeTime" :key="key">-->
<!--                            <div v-if="freeTime.value!=null">-->
<!--                                <span >{{key}}</span>-->
<!--                            </div>-->
<!--                        </div>-->
<!--                    </div>-->
                </div>




                <p style="margin-top: 20px">
                    <em>下单日期：</em>
                    <input type="text" style=" height:25px; width: 340px; border:1px solid #eaeaea;margin-top:13px"
                           v-model="ordersinfo.dateTime" >
                </p>

                <p>
                    <em>故障描述：</em>
                    <textarea style=" height:50px; border:1px solid #eaeaea; width:440px" v-model="ordersinfo.faultDescription"></textarea>
                    <span></span>
                </p>
                <br>
                <p>
                    <em>反馈：</em>
                    <span style="" v-show="Confirm">{{orderConfirm}}</span>
                </p>

                <a href="#" class="public_m3" @click="save">发布订单</a>
            </div>
        </div>
    </div>

    <end></end>

</div>
</body>
</html>
<script>
    var theDate = new Date();
    var seperator = "-";
    var app = new Vue({
        el: "#app",
        data: {
            admin: {},
            message: '',
            now: true,
            orderTime: true, //下单的日期
            timeZonePm: false,//下午工作时间段
            theDate: false,//当前日期
            Confirm: false,//下单提示信息
            orderToday: false,//今日下午预约订单的时间段
            orderTimeZone: '',
            userName: '',
            order: false,//预约订单是否显示
            findFaultType: [],//故障分类
            findOrderDate: [],//今日明日后日
            selectAllProvince: [],
            findCityByProvinceId: [],
            findDistrictByCityID: [],
            findStreetByDistrictId: [],
            findTimeZone: [],
            findTimeZonePm: [],
            workTime: '',
            orderConfirm: '',//下单提示信息
            ordersTime: '',//下单时间
            province: {
                id: ""
            },//省份
            city: {
                id: ""
            },//城市
            district: {
                id: ""
            },//区
            street: {
                id: ""
            },//街道
            ordersinfo: {
                addressInfo: "",
                dateTime: "",
                userName:"",
                phone:"",
            },//下单信息
            freeTime: {},//空闲时间及工作人员的MAP
            findAddressByUserinfo: [],//根据用户token 获取ID 查找到的地址


            secletDateAddNumber: {},//根据当前日期增加的天数
            error: {                  //信息提交错误的提示信息
                heatingNumber: '',
                heatingAddress: '',
                userName: '',
                phoneNumber: '',
                heatingProblem: ''

            },
            //默认当前日期
            date: {
                year: theDate.getFullYear(),
                month: theDate.getMonth(),
                day: theDate.getDate(),
                hour: theDate.getHours(),
                min: theDate.getMinutes(),
                sec: theDate.getSeconds()
            }
        },
        created: function () {
            //初始化月份数列
            this.initData();
            this.initFindFaultType();
            this.initOrderDate();
            // this.initTimeZone();
            this.initProvincialAndMunicipalLinkage();
            // this.initFindAddressByUserinfo();
        },
        methods: {

            // selectAllProvince: function () {
            //     axios.post("http://localhost:8080/userinfo/selectAllProvince")
            //         .then(res => {
            //             console.log(res.data.data);
            //             this.selectAllProvince = res.data.data;
            //         });
            // },
            findUserinfo:function (){
                axios.post("http://localhost:8080/userinfo/findUserinfo",this.ordersinfo)
                    .then(res => {
                        console.log(res.data.data);
                        this.ordersinfo.phone= res.data.data.phone;
                    });
                axios.post("http://localhost:8080/userinfo/findAddressByUserinfo",this.ordersinfo)
                    .then(res => {
                        console.log(res.data.data);
                        this.findAddressByUserinfo = res.data.data.detail;
                    });
            },
            initProvincialAndMunicipalLinkage: function () {
                axios.post("http://localhost:8080/userinfo/selectAllProvince")
                    .then(res => {
                        console.log(res.data.data);
                        this.selectAllProvince = res.data.data;
                    });
            },
            initData: function () {
                //大月的月份
                this.oddMonth = [1, 3, 5, 7, 8, 10, 12];
                //小月月份
                this.lesserMonth = [4, 5, 6, 11];
                this.dateTime = '';
            },
            // initTimeZone: function () {
            //     axios.post("http://localhost:8080/userinfo/findWorkTime")
            //         .then(res => {
            //             console.log(res.data.data);
            //             this.findTimeZone = res.data.data;
            //         });
            //     axios.post("http://localhost:8080/userinfo/findWorkTimePm")
            //         .then(res => {
            //             console.log(res.data.data);
            //             this.findTimeZonePm = res.data.data;
            //         });
            //
            // },

            //生成今日，明日，后日

            initOrderDate: function () {
                //

                axios.post("http://localhost:8080/userinfo/findOrderDate")
                    .then(res => {
                        console.log(res.data.data);
                        this.findOrderDate = res.data.data;
                    });


            },
            //生成故障信息的下拉列表
            initFindFaultType: function () {
                axios.post("http://localhost:8080/userinfo/findFaultType")
                    .then(res => {
                        console.log(res.data.data);
                        this.findFaultType = res.data.data;
                    });
            },
            // initFindAddressByUserinfo: function () {
            //     var token = localStorage.getItem("userinfo")
            //     console.log(window.localStorage.getItem("userinfo"));
            //     console.log(token);
            //     console.log(localStorage.getItem("admin"));
            //
            // },
            findCity: function () {
                axios.post("http://localhost:8080/userinfo/findCityByProvinceId", this.province)
                    .then(res => {
                        console.log(res.data.data);
                        this.findCityByProvinceId = res.data.data;
                    });
            },
            findDistrict: function () {
                axios.post("http://localhost:8080/userinfo/findDistrictByCityId", this.city)
                    .then(res => {
                        console.log(res.data.data);
                        this.findDistrictByCityID = res.data.data;
                    });
            },
            findStreet: function () {
                axios.post("http://localhost:8080/userinfo/findStreetByDistrictId", this.district)
                    .then(res => {
                        console.log(res.data.data);
                        this.findStreetByDistrictId = res.data.data;
                    });

            },

            //通过地址查找省市联动，如果为新地址则生成非常用地址
            findProvincialAndMunicipaLinkageByAddress: function () {
                axios.post("http://localhost:8080/userinfo/findProvincialAndMunicipaLinkageByAddress", this.ordersinfo)
                    .then(res => {
                        console.log(res.data.data);
                        if (res.data.data != null) {
                            this.province.id = res.data.data.province;
                            this.city.id = res.data.data.city;
                            this.district.id = res.data.data.district;
                            this.street.id = res.data.data.street;
                        } else {
                            alert(res.data.message);
                            this.ordersinfo.addressInfo = '';
                            this.$refs.heatingAddress.select();
                            this.error.heatingAddress = "地址非用户已存地址";
                            confirm("是否保存新地址");
                            var flag=confirm("是否保存新地址");
                            if(flag==true&&this.ordersinfo.userName!=null){
                                axios.post("http://localhost:8080/userinfo/insertNewAddress?sterrtId="+this.street.id,this.ordersinfo )
                                    .then(res => {
                                        console.log(res.data.data);
                                        this.findStreetByDistrictId = res.data.data;
                                    });
                            }
                            else{
                                this.$refs.userName.focus();
                                this.error.heatingAddress="";
                            }
                        }
                    });
            },
            checkTimeZone: function () {
                this.order = true;
                this.Confirm = false;
            },
            //上传下单信息
            save: function () {
                console.log("ordersinfo："+this.ordersinfo)
                // var phn = /^1[0-9]{10}$/;
                // if (this.ordersinfo.heatingNumber == undefined || this.ordersinfo.heatingNumber == "") {
                //     this.error.heatingNumber = "请选择输入供暖号码或者输入地址";
                //     this.$refs.heatingNumber.focus();
                //     return;
                // } else if (phn.test(this.ordersinfo.heatingNumber)) {
                //     this.error.heatingNumber = "";
                // } else {
                //     return;
                // }
                //
                // if (this.ordersinfo.addressInfo == undefined || this.ordersinfo.addressInfo == "" || this.ordersinfo.heatingNumber == undefined || this.ordersinfo.heatingNumber == "") {
                //     this.$refs.heatingNumber.focus();
                //     return;
                // } else {
                //     this.error.heatingAddress = "";
                // }
                // if (this.userName == undefined || this.userName == "") {
                //     this.error.userName = "请输入用户名";
                //     this.$refs.userName.focus();
                //     return;
                // } else {
                //     this.error.userName = "";
                // }
                // if (this.ordersinfo.phone == undefined || this.ordersinfo.phone == "") {
                //     this.error.phoneNumber = "请输入联系方式";
                //     this.$refs.phoneNumber.focus();
                //     return;
                // } else if (!phn.test(this.ordersinfo.phone)) {
                //     this.error.phoneNumber = "请输入正确的联系方式";
                //     this.$refs.phoneNumber.focus();
                //     return;
                // } else {
                //     this.error.phoneNumber = "";
                // }
                // if (this.ordersinfo.faultDescription == undefined || this.ordersinfo.faultDescription == "") {
                //     this.error.heatingProblem = "请输入故障详细情况";
                //     this.$refs.heatingProblem.focus();
                //     return;
                // } else {
                //     this.error.heatingProblem = "";
                // }
                // if(this.ordersinfo.faultTypeId=undefined||this.ordersinfo.faultTypeId == ""){
                //     this.error.faultTypeId = "请选择故障分类";
                //     this.$resf.faultTypeId.focus();
                // }
                // else{
                //     this.error.faultTypeId = "";
                // }
                if (this.ordersinfo.orderTimeZone==undefined&&this.ordersinfo.orderTimeZone=="") {
                    axios.post("http://localhost:8080/userinfo/placeOrder", this.ordersinfo)
                        .then(res => {
                            console.log(res.data.message);
                        });
                } else {
                    axios.post("http://localhost:8080/userinfo/placeOrder", this.ordersinfo)
                        .then(res => {
                            console.log(res.data);
                            if (res.data.data==undefined) {
                                alert("下单成功")
                            }
                            else{
                                confirm(res.data.message);
                                var flag=confirm(res.data.message);
                                if(flag==true){
                                    location.reload();
                                }
                            }
                        });

                }
            },
//            获取地址，输入供暖号码后查询地址并自动生成
            findAddress: function () {
                console.log(this.ordersinfo.heatingNumber);
                if (this.ordersinfo.heatingNumber == undefined || this.ordersinfo.heatingNumber == "") {
                    this.error.heatingNumber = "请输入供暖号码";
                    return;
                } else {
                    this.error.heatingNumber = "";
                }
                console.log(this.ordersinfo);
                //查询之前清空地址信息
                axios.post("http://localhost:8080/userinfo/findAddressByMas", {"heatingNumber": this.ordersinfo.heatingNumber})
                    .then(res => {
                        console.log(res.data.data)
                        if (res.data.data == null || res.data.data == "") {
                            console.log("账号有误")
                            this.error.heatingAddress = "账号输入有误，请重新输入";
                            this.$refs.heatingNumber.focus();
                        } else {
                            this.ordersinfo.addressInfo = res.data.data.address;
                        }

                    });

            },

            //下单日期
            time(index) {
                this.ordersinfo.dateTime = "";
                this.ordersinfo.orderTimeZone ="";
                console.log(index);
                if (index == 0) {
                    this.secletDateAddNumber = 0;
                    this.checkDay();
                    if (this.date.month < 10) {
                        var currentDate = this.date.year + seperator + 0 + this.date.month + seperator + this.date.day;
                        this.ordersinfo.dateTime = currentDate;
                        if (this.date.day < 10) {
                            var currentDate = this.date.year + seperator + 0 + this.date.month + seperator + 0 + this.date.day;
                            this.ordersinfo.dateTime = currentDate;
                        }
                    } else {
                        var currentDate = this.date.year + seperator + this.date.month + seperator + this.date.day;
                        this.ordersinfo.dateTime = currentDate;
                    }
                    var hour = theDate.getHours();
                    if (hour >= 9 && hour < 12) {
                        this.orderConfirm = '可预约下午订单，也可下单今日即时订单';
                        this.timeZonePm = true;
                        this.orderToday = true;
                        this.order = true;
                        this.findFreeTime();
                    } else if (hour >= 12 && hour < 18) {
                        var currentDate = this.date.year + seperator + 0 + this.date.month + seperator + this.date.day;
                        this.orderConfirm = '可下单'+currentDate+',既今日即时订单';
                        this.now = false;
                        this.orderToday = false;
                        this.order = false;
                        this.findFreeTime();
                    } else {
                        this.orderConfirm = '可预约明后天订单，不可下单即时订单';
                        this.now = false;
                        this.orderTime = false;
                        this.orderToday = false;
                        this.order = false;
                    }

                    console.log(this.ordersinfo.dateTime);
                    //传回当前日期
                    this.Confirm = true;
                    console.log(this.ordersinfo.addressInfo);

                }
                if (index == 1) {
                    this.order = true;
                    this.secletDateAddNumber = 1;
                    this.checkDay();
                    this.orderConfirm = '';
                    if (this.date.month < 10) {
                        var currentDate = this.date.year + seperator + 0 + this.date.month + seperator + this.date.day;
                        this.ordersinfo.dateTime = currentDate;
                        if (this.date.day < 10) {
                            var currentDate = this.date.year + seperator + 0 + this.date.month + seperator + 0 + this.date.day;
                            this.ordersinfo.dateTime = currentDate;
                        }
                    } else {
                        var currentDate = this.date.year + seperator + this.date.month + seperator + this.date.day;
                        this.ordersinfo.dateTime = currentDate;
                    }

                    this.Confirm = true;
                    this.orderConfirm = '可下单'+currentDate+'预约订单';
                    this.timeZonePm = true;
                    this.orderToday = false;
                    console.log(this.ordersinfo.dateTime);
                    this.ordersinfo.dateTime = currentDate;
                    this.findFreeTime();

                }


                if (index == 2) {
                    this.secletDateAddNumber = 2;
                    this.checkDay();
                    this.order = true;
                    if (this.date.month < 10) {
                        var currentDate = this.date.year + seperator + 0 + this.date.month + seperator + this.date.day;
                        this.ordersinfo.dateTime = currentDate;
                        if (this.date.day < 10) {
                            var currentDate = this.date.year + seperator + 0 + this.date.month + seperator + 0 + this.date.day;
                            this.ordersinfo.dateTime = currentDate;
                        }
                    } else {
                        var currentDate = this.date.year + seperator + this.date.month + seperator + this.date.day;
                        this.ordersinfo.dateTime = currentDate;
                    }
                    this.orderConfirm = '';
                    this.Confirm = true;
                    this.timeZonePm = true;
                    this.orderToday = false;
                    console.log(this.ordersinfo.dateTime);
                    this.findFreeTime();
                    this.orderConfirm = '可下单'+currentDate+'预约订单';
                }
            },
            findFreeTime: function () {
                console.log("已调用")
                if (this.ordersinfo.addressInfo == undefined || this.ordersinfo.addressInfo == "") {
                    this.$refs.heatingAddress.focus();
                    this.order=false;
                    this.orderConfirm="请输入地址";
                    this.error.heatingAddress="请输入地址";
                } else {
                    if(this.ordersinfo.dateTime!=null)
                    {
                        console.log("last:",this.ordersinfo);
                        axios.post("http://localhost:8080/userinfo/findRightTime", this.ordersinfo)
                            .then(res => {
                                console.log(res.data.data);
                                this.freeTime = res.data.data;
                                console.log(this.freeTime.valueOf().length);

                            });
                    }


                }
            },

            //年份增加
            checkYear: function () {
                this.date.year = theDate.getFullYear() + 1;

            },
            //判断月份增加后是否溢出
            checkMonth: function () {
                //获取月份的值
                //月份+1后判断月份是否超过12
                //重新设定月份的值
                this.date = {
                    month: theDate.getMonth() + 1
                }
                if (this.date.month > 12) {
                    this.date.month = 1;
                    this.checkYear();
                } else {
                    this.date.month = this.date.month + 1;
                }

            },
            //判断日期增加是否溢出，溢出同时更改月份（年份）
            rightNow: function () {
                this.date = {
                    hour: theDate.getHours()
                }
                if (this.date.hour < 9 && this.date.hour > 18) {

                }
            },
            checkDay: function () {
                //获取当前系统时间
                this.date = {
                    year: theDate.getFullYear(),
                    month: theDate.getMonth() + 1,
                    day: theDate.getDate() + this.secletDateAddNumber
                };

                if (this.oddMonth.indexOf(this.date.month) && this.date.day > 31) {
                    this.date.day = this.date.day - 31;
                    this.checkMonth();
                }
                if (this.lesserMonth.indexOf(this.date.month) && this.date.day > 30) {
                    this.date.day = this.date.day - 30;
                    this.checkMonth();
                }
                if (this.date.year % 100 != 0 && this.date.year % 4 == 0 || this.date.year % 400 == 0) {
                    if (this.date.month = 2 && this.date.day > 29) {
                        this.date.day = this.date.day - 29;
                        this.checkMonth();
                    } else {
                        this.date.day = this.data.day - 28;
                        this.checkMonth();
                    }
                }
                console.log("今天日期" + this.date.day);
                //获取月份的值
                //判断是否为2月
                //判断月份是否存在于大月数列
                //修改日期
                //判断日期是否溢出，按需进行月份增加（按需进行年份增加）

            }
        }
    });
</script>
<script>
    //模拟下拉菜单的js*/
    $(".sjhcp_in span").on("mouseenter", function (e) {
        if ($(".little_list").is(":hidden")) {
            $(".little_list").show();
        } else {
            $(".little_list").hide();
        }
        $(".little_list em").click(function () {
            var txt = $(this).text();
            $(".sjhcp_in span").text(txt);
            $(".little_list").hide();
        })
        $(document).one("click", function () {
            $(".little_list").hide();
        });
        e.stopPropagation();
    });
    $(".little_list").on("click", function (e) {
        e.stopPropagation();
    });

    window.onload = function () {
        $(".aside").css({display: "none"})
        $(".important").mouseenter(function () {
            $(".aside").css({display: "block"})
        }).mouseleave(function () {
            $(".aside").css({display: "none"})
        })
    }

</script>